<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  body {
  background: tomato;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  color: white;
  font-size: 30px;
  margin: 0;
  padding: 0;
}

div {
  display: inline-block;
  border: 3px solid white;
  padding: 10px;
  border-radius: 10px;
  margin: 0 2px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

strong {
  position: absolute;
  margin-top: -70px;
  margin-left: -80px;
  background: white;
  color: tomato;
  padding: 7px;
  border-radius: 7px;
  font-size: 0.7em;
  text-align: center;
  width: 50px;
  transition: margin-top .1s;
}

i {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: white;
  position: absolute;
  margin-top: 33px;
  margin-right: -10px;
  right: 50%;
}

.c {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  text-align: center;
  display: block;
  width: 100%;
  padding: 0;
}

div:hover {
  background: white;
  color: tomato;
}

div:hover > strong {
  margin-top: -75px;
}

span {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none; 
}
  </style>
 </HEAD>

 <BODY>
  <span class="c">
  I 
  <div>
    <span>love 
      <b>❤</b><!--
  --></span><!--
 --><strong data-n="0">0<i></i></strong>
  </div> this!
</span>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("span").not(".c").click(function() {
  var n = Number($("strong").attr("data-n"))+1;
  $("strong").html(
    a(n,1)+"<i></i>"
  ).attr("data-n",n);
});

function a(a,b){b=Math.pow(10,b);var c=["k","m","b","t"];for(var i=c.length-1;i>=0;i--){var d=Math.pow(10,(i+1)*3);if(d<=a){a=Math.round(a*b/d)/b;if((a==1000)&&(i<c.length-1)){a=1;i++}a+=c[i];break}}return a}
</script>
 </BODY>
</HTML>
